<template>
  <div class="app-container">
    <dv-border-box-11 title="行驶证识别">
      <div style="padding: 60px 60px 100px;">
        <dv-decoration-10 style="width:100%;height:40px;"/>
        <h1>核心能力</h1>
        <div v-if="form.cardSide==='BACK'">
          支持行驶证副页所有字段的自动定位与识别，包含号牌号码、档案编号、核定人数、总质量、整备质量、核定载质量、外廓尺寸、备注、核验记录、准牵引总质量。
        </div>
        <div v-else>
          支持行驶证主页所有字段的自动定位与识别，包含号牌号码、车辆类型、所有人、住址、使用性质、品牌型号、车辆识别代码、发动机号码、注册日期、发证日期、印章。
        </div>
        <el-row>
          <el-col :span="12">
            <dv-border-box-9>
              <div style="text-align:center;margin: 20px;padding: 20px">
                <image-identify-oss @input="getUrlList"></image-identify-oss>
                <el-input placeholder="请输入在线图片url（上传图片和输入url二选一）" v-model="form.imageUrl" class="input-with-select">
                  <el-select v-model="form.cardSide" slot="prepend" placeholder="请选择驾驶证正/副页">
                    <el-option label="正页" value="FRONT"></el-option>
                    <el-option label="副页" value="BACK"></el-option>
                  </el-select>
                  <el-button slot="append" icon="el-icon-search" @click="searchVehicleLicense"></el-button>
                </el-input>
              </div>
            </dv-border-box-9>
          </el-col>
          <el-col :span="12">
            <dv-border-box-9>
              <div style="height: 500px;margin: 20px;padding: 20px">
                <el-collapse v-model="collapse" accordion>
                  <el-collapse-item title="识别结果" name="1">
                    <div v-if="this.form.cardSide=='BACK'">
                      <el-descriptions class="margin-top" :column="2" size="small" border>
                        <el-descriptions-item>
                          <template slot="label"><i class="el-icon-user"></i>号牌号码</template>
                          {{ responseData.plateNo }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label"><i class="el-icon-user"></i>档案编号</template>
                          {{ responseData.fileNo }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label"><i class="el-icon-user"></i>核定载人数</template>
                          {{ responseData.allowNum }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label"><i class="el-icon-user"></i>总质量</template>
                          {{ responseData.totalMass }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label"><i class="el-icon-user"></i>整备质量</template>
                          {{ responseData.curbWeight }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label"><i class="el-icon-user"></i>检验记录</template>
                          {{ responseData.record }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label"><i class="el-icon-user"></i>核定载质量</template>
                          {{ responseData.loadQuality }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label"><i class="el-icon-user"></i>外廓尺寸</template>
                          {{ responseData.externalSize }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label"><i class="el-icon-user"></i>准牵引总质量</template>
                          {{ responseData.totalQuasiMass }}
                        </el-descriptions-item>
                      </el-descriptions>
                    </div>
                    <div v-else>
                      <el-descriptions class="margin-top" :column="2" size="small" border>
                        <el-descriptions-item>
                          <template slot="label"><i class="el-icon-user"></i>号牌号码</template>
                          {{ responseData.plateNo }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label"><i class="el-icon-user"></i>车辆类型</template>
                          {{ responseData.vehicleType }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label"><i class="el-icon-user"></i>所有人</template>
                          {{ responseData.owner }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label"><i class="el-icon-user"></i>住址</template>
                          {{ responseData.address }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label"><i class="el-icon-user"></i>使用性质</template>
                          {{ responseData.useCharacter }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label"><i class="el-icon-user"></i>品牌型号</template>
                          {{ responseData.model }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label"><i class="el-icon-user"></i>车辆识别代号</template>
                          {{ responseData.vin }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label"><i class="el-icon-user"></i>发动机号码</template>
                          {{ responseData.engineNo }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label"><i class="el-icon-user"></i>注册日期</template>
                          {{ responseData.registerDate }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label"><i class="el-icon-user"></i>发证日期</template>
                          {{ responseData.issueDate }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label"><i class="el-icon-user"></i>印章信息</template>
                          {{ responseData.seal }}
                        </el-descriptions-item>
                      </el-descriptions>
                    </div>
                  </el-collapse-item>
                  <el-collapse-item title="Request" name="2">
                    <json-viewer :value="form" closed="true" :expand-depth="1" icon-style copyable boxed :sort="true" :expanded="true" :preview-mode="false"></json-viewer>
                  </el-collapse-item>
                  <el-collapse-item title="Response" name="3">
                    <json-viewer :value="responseData" closed="true" :expand-depth="1" icon-style copyable boxed :sort="true" :expanded="true" :preview-mode="false"></json-viewer>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </dv-border-box-9>
          </el-col>
        </el-row>
      </div>
    </dv-border-box-11>
  </div>
</template>

<script>
import JsonViewer from 'vue-json-viewer'
import {vehicleLicenseOCR} from "@/api/txcloud/ocr/car";

export default {
  components: {
    JsonViewer
  },
  data() {
    return {
      collapse: '1',
      form: {},
      responseData: {},
    };
  },
  created() {
  },
  methods: {
    searchVehicleLicense() {
      console.log(this.form)
      vehicleLicenseOCR(this.form).then(res => {
          if (res.code === 200) {
            if (this.form.cardSide == 'BACK') {
              this.responseData = res.data.backInfo
            } else {
              this.responseData = res.data.frontInfo
            }
            this.$modal.msgSuccess(res.msg);
          } else {
            this.$modal.msgError(res.msg);
          }
        }
      );
    },
    getUrlList(val) {
      this.form.imageUrl = val
    },
    getImageBase64(val) {
      this.form.imageBase64 = val
    },
  }
};
</script>
<style lang="scss" scoped>
.input-with-select .el-input-group__prepend {
  background-color: #fff;

  .el-select {
    width: 10vw;
  }
}
</style>
